<template>
  <div>
    <a-breadcrumb>
      <a-breadcrumb-item v-for="item in breadcrumbData" :key="item.path">
        <router-link :to="item.path">{{item.name}}</router-link>
      </a-breadcrumb-item>
    </a-breadcrumb>
  </div>
</template>

<script>
  import breadcurmb from '@/assets/js/breadcrumb'

  export default {
    name: 'crumbs',
    data() {
      return {
        routerData: []
      }
    },
    mounted() {
      this.$store.commit('set_breadcurmb_data', this.getParentPath(this.$route.path));
    },
    computed: {
      breadcrumbData() {
        return this.$store.state.breadcrumbData
      }
    },
    watch: {
      $route(to, from) {
        console.log(to.path, from.path);
        this.$store.commit('set_breadcurmb_data', this.getParentPath(to.path));
      }
    },
    methods: {
      getParentPath(path) {
        let pathArray = [];
        for(let item of breadcurmb) {
          if(item.path === path) {
            pathArray.push(item);
            if(item.parentPath) {
              console.log(item.parentPath);
              pathArray = [...this.getParentPath(item.parentPath), ...pathArray];
            }
            return pathArray;
          }
        }
        return pathArray;
      }
    },
    props: {},
  }
</script>
